<template>
	<view class="u-rela">
		<image class="header-bg" :src="data.image ? data.image : 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img4.png'" mode="widthFix"></image>
		<!-- 自定义头部start -->
		<customHeader title="生长日记"></customHeader>
		<!-- 自定义头部end -->
		<!-- 数值start -->
		<view class="num-wrap">
			<view class="item">
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-d-n-1.png" mode="widthFix"></image>
				<text class="name">总日照时数</text>
				<text class="value">{{data.sunshine}}</text>
			</view>
			<view class="item">
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-d-n-2.png" mode="widthFix"></image>
				<text class="name">总有效积温</text>
				<text class="value">{{data.accumulate_temp}}</text>
			</view>
			<view class="item">
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-d-n-3.png" mode="widthFix"></image>
				<text class="name">平均昼夜温差</text>
				<text class="value">{{data.avg_temp_difference}}</text>
			</view>
		</view>
		<!-- 数值end -->
		<view class="wrap">
			<view class="u-font-34 blod">成长日记</view>
			<view class="u-flex">
				<u-image :src="data.user.image ? data.user.image : 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/my/avatar.png'" width="120rpx"
					height="120rpx" shape="circle"></u-image>
				<view class="manager">
					我是基地管理员：<text class="green">{{data.user.name}}</text>以下农事
					操作，是在我的监督下完成
				</view>
			</view>
			<scroll-view class="property-wrap" scroll-x>
				<view class="grid">
					<template v-for="(item,index) in data.list">
						<view :class="['item',{active:tabIndex==index}]" :key="index" @click="handleChange(item,index)">
							<image v-if="tabIndex!=index" class="icon"
								:src="'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-d-'+(index+1)+'.png'" mode="widthFix">
							</image>
							<image v-else class="icon" :src="'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/icon-d-'+(index+1)+'a.png'"
								mode="widthFix">
							</image>
							<text class="name">{{item.name}}</text>
							<text class="value">{{item.date}}</text>
						</view>
					</template>
				</view>
			</scroll-view>
			<!-- <navigator url="/pages/agricTrace/growDiary/shifei"> -->
			<view class="imgwrap u-m-t-40 u-flex u-row-between u-col-bottom">
				<scroll-view scroll-x style="white-space: nowrap;">
					<image :class="imageCurrent==index ? 'img1' : 'img2'" :src="item.image ? item.image : 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img5.png'" mode="widthFix" v-for="(item,index) in work_list" :key="index" @click="toShifei(item.id,index)"></image>
				<!-- <image class="img2" src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img6.png" mode="widthFix"></image> -->
				</scroll-view>
			</view>
			<!-- </navigator> -->
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar active-color="#07C160" v-model="current" :list="list" :mid-button="false" @change="tabbarChange">
		</u-tabbar>
	</view>
</template>

<script>
	import customHeader from '@/components/customHeader.vue'
	export default {
		components: {
			customHeader
		},
		data() {
			return {
				tabIndex: 0,
				current: 2,
				list: [{
						iconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-1.png',
						selectedIconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-1a.png',
						text: '产品信息',
						customIcon: false,
						url: '/pages/agricTrace/agricInfo/agricInfo'
					},
					{
						text: '生长环境',
						iconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-2.png',
						selectedIconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-2a.png',
						customIcon: false,
						url: '/pages/agricTrace/growEnv/growEnv'
					},
					{
						text: '生长日记',
						iconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-3.png',
						selectedIconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-3a.png',
						customIcon: false,
						url: '/pages/agricTrace/growDiary/growDiary'
					},
					{
						text: '权威监管',
						iconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-4.png',
						selectedIconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/trace/bottom-4a.png',
						customIcon: false,
						url: '/pages/agricTrace/authority/authority'
					}
				],
				code:'',
				data:{},
				imageCurrent:0,
				work_list:[]
			}
		},
		onLoad() {
			
			if(this.$store.state.code){
				this.code = this.$store.state.code;
				console.log(this.code,'生长日记');
			}
			
			this.trace_grow_process();
		},
		methods: {
			tabbarChange(index) {
				// console.log(index)
				uni.navigateTo({
					url: this.list[index].url
				})
			},
			handleChange(item,index) {
				// console.log(item);
				this.tabIndex = index;
				this.work_list = item.work_list
			},
			
			// 获取页面数据
			trace_grow_process(){
				this.$http_1({
					url:this.api_1.trace_grow_process,
					method: 'get',
					data:{
						code:this.code,
					}
				}).then(res => {
					// console.log(res,'生长日记');
					if(res.code == 1){
						this.data = res.data;
						this.work_list = this.data.list[0].work_list
					}
				})
			},
			
			toShifei(id,index){
				this.imageCurrent = index;
				uni.navigateTo({
					url: "/pages/agricTrace/growDiary/shifei?id=" + id
				})
			}
		},
		onReady() {

		}
	}
</script>

<style scoped lang="scss">
	.header-bg {
		position: relative;
		width: 750rpx;
		height: 750rpx;
		z-index: 1;
	}

	.wrap {
		position: relative;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 60rpx 40rpx;
		overflow: hidden;
		margin-top: -50rpx;
		z-index: 9;

	}

	.manager {
		width: 480rpx;
		height: 120rpx;
		background: #F3F3F3;
		border-radius: 10rpx;
		margin-left: 30rpx;
		font-size: 28rpx;
		padding: 25rpx 30rpx;
		margin-top: 40rpx;
	}

	.property-wrap {
		white-space: nowrap;
		width: 666rpx;
		margin-top: 50rpx;

		.grid {
			width: 1000rpx;
			display: flex;

			.item {
				margin-right: 20rpx;
				width: 180rpx;
				height: 100rpx;
				border-radius: 10rpx;
				display: grid;
				grid-template-columns: 45%, 55%;
				grid-template-rows: repeat(2, 50%);
				align-items: center;
				background: #E6F8EE;
				padding: 15rpx;

				.icon {
					width: 40rpx;
					height: 40rpx;
					grid-column: 1/3;
					grid-row: 1/2;
				}

				.name {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #07C160;
				}

				.value {
					color: #07C160;
					font-size: 18rpx;
					font-family: PingFang SC;
					justify-self: end;
				}

				&.active {
					background: #07C160;

					.name {
						color: #fff;
					}

					.value {
						color: rgba(255, 255, 255, .6);
					}
				}
			}
		}
	}

	.imgwrap {

		.img1 {
			width: 360rpx;
			height: 537rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
		}

		.img2 {
			width: 289rpx;
			height: 479rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
		}
	}
.num-wrap{
	left:0;
	top:247rpx;
	position: absolute;
	z-index:2;
	.item{
		width: 266rpx;
		height: 95rpx;
		background: rgba(255,255,255,.9);
		border-radius: 0px 48rpx 48rpx 0px;
		margin-bottom: 20rpx;
		display: grid;
		grid-template-columns: 74rpx auto;
		gap:0 10rpx;
		padding:10rpx 8rpx;
		align-items: center;
		image{
			width: 74rpx;
			height: 74rpx;
			grid-row: 1/3;
			
		}
		.name{
			font-size: 24rpx;
			font-family: Source Han Serif SC;
			font-weight: bold;
			color: #000000;
		}
		.value{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #07C160;
		}
	}
}
</style>
<style>
	page {
		padding: 0;
	}
</style>
